<template>
  <el-input v-model="itemValue" placeholder="Please input" class="input-with-select">
    <template #prepend>
      <el-select v-model="select" placeholder="Select" style="width: 115px">
        <el-option label="Restaurant" value="1" />
        <el-option label="Order No." value="2" />
        <el-option label="Tel" value="3" />
      </el-select>
    </template>
    <template #append>
      <el-button :icon="Search" />
    </template>
  </el-input>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { computed } from 'vue';
interface Props {
  modelValue: string | undefined
  dataForm: ObjectAny // 绑定对象
}
const props = withDefaults(defineProps<Props>(), {})
const emit = defineEmits(['update:modelValue', 'change'])


const itemValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

const select = computed({
  get() {
    return props.dataForm['select']
  },
  set(value) {
    emit('change', 'select', value)
  }
})
</script>

<style>
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
</style>
